import React from 'react'
import {useLocation,useParams} from 'react-router-dom'
import qs from 'qs'

export default function Music() {
  //通过useLocation可以获取当前的路由地址信息，是一个对象
  //其中1.path：是当前的路由地址 
  //2.search是路由地址后面的查询字符串参数'?username=高高&id=8325'
  //3.state是navigate的第二个参数传过来的数据,传的是什么，就接收到什么
  const location = useLocation()
  const query = location.search//'?username=高高&id=8325'
  const {username}= qs.parse(query.split('?')[1])

  const musicList = location.state 
  const {id}= useParams()

  return (
    <div>
      <h1>我的名字是{username},编号是{id}</h1>
      <ul>
        {
          musicList.map((item)=>{
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
